<template>
    <div class="container">
      <el-card class="card">
        <div class="dialogue" ref="dialogueContainer">
          <div v-for="(item,index) in dataList" :key="index">
            <div v-if="item.type === 1"  class="question">
              <div class="content" v-html="item.content"></div>
            </div>
            <div v-else v-html="item.content" class="answer">
            </div>
          </div>
        </div>
        <div class="question">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入向AI助手提问的内容"
            v-model="queryInfo.question" 
            class="textarea"
            >
          </el-input>
          <div class="sendQuestion">
            <el-button type="primary" size="mini" class="btn" @click="sendQuestion">
              <i class="el-icon-s-promotion"></i>
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
</template>
<script>
export default {
    data(){
        return {
          queryInfo:{
            conversationId:1
          },
          dialogueList:[],
          dataList:[],
          user:'',
          answer:'',
        }
    },
    methods:{
      async sendQuestion(){
        // this.getAllDialogueList();
        this.dataList.push({content:this.queryInfo.question,type:1})
        const {data:res} = await this.$http.post('/chat/create',this.queryInfo)
        if(res){
          this.queryInfo.answer = res
          this.addDialogue()
        }
        this.queryInfo = {}
      },
      async getAllDialogueList(){
        this.dataList = []
        this.dialogueList = []
        this.user = JSON.parse(sessionStorage.getItem("user"))
        this.queryInfo.uid = this.user.id
        const {data:res} = await this.$http.get('/getAllDialogueList?uid='+this.user.id);
        if(res.code === 200){
          this.dialogueList = res.data;
        }else{
          this.$message.error(res.message);
        }
        for(let item of this.dialogueList){
          this.dataList.push({content:item.question,type:1})
          this.dataList.push({content:item.answer,type:2})
        }
        },
        async addDialogue(){
          const {data:res} = await this.$http.post('/addDialogue',this.queryInfo)
          if(res.code === 200){
            this.getAllDialogueList()
          }else{
            this.$message.error(res.message);
          }
        },
        scrollToBottom() {  
      const dialogueContainer = this.$refs.dialogueContainer;  
      if (dialogueContainer) {  
        dialogueContainer.scrollTop = dialogueContainer.scrollHeight;  
      }  
    },  
    },
    created(){
      this.getAllDialogueList()
    },
    mounted(){
      this.scrollToBottom();  
    // 如果dataList是异步加载的，你可能需要观察它的变化  
    this.$watch('dataList', () => {  
      this.scrollToBottom();  
    }, { deep: true });  
    },
}
</script>
<style lang="less" scoped>
// .card{
//   height: 85vh;
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-end;
//   align-items: center;
//   box-sizing: border-box;
//   .question{
//     display: flex;
//     justify-content: center;
//     width: 70%;
//     margin-top: auto
//   }
// }\
.card{
  height: 84vh;
  padding: 0 50px;
  .dialogue{
    height: 65vh;
    overflow-y: auto;
    margin-bottom: 10px;
    .question{
      // background-color: rgba(242, 243, 245, 1);
      width: 95%;
      display: flex;
      justify-content: end;
      .content{
        max-width: 75%;
        padding: 6px 12px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-size: 14px;
        display: flex;
        justify-content: end;
       background-color: rgba(242, 243, 245, 1);
      }

    }
    .answer{
      // background-color: rgba(242, 243, 245, 1);
      max-width: 70%;
      padding: 6px 12px;
      border-radius: 4px;
      margin-bottom: 20px;
      font-size: 14px;
    }
    }
  .question{
    display: flex;
    width: 100%;
    // top: 63vh;
    .textarea{
      width: 70%;
      padding-left: 150px;
    }
    .sendQuestion{
      margin-left: 10px;
    }
  }

}
</style>